<template>
    <view class="u-page">
        <up-list @scrolltolower="scrolltolower">
            <up-list-item v-for="(item, index) in indexList" :key="index">
                <up-cell :title="`列表长度-${index + 1}`">
                    <template #icon>
                        <up-avatar
                            shape="square"
                            size="35"
                            :src="item.url"
                            customStyle="margin: -3px 5px -3px 0"
                        ></up-avatar>
                    </template>
                </up-cell>
            </up-list-item>
        </up-list>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 定义 indexList
const indexList = ref([]);
// 定义 URL 列表
const urls = [
    'https://uview-plus.jiangruyi.com/album/1.jpg',
    'https://uview-plus.jiangruyi.com/album/2.jpg',
    'https://uview-plus.jiangruyi.com/album/3.jpg',
    'https://uview-plus.jiangruyi.com/album/4.jpg',
    'https://uview-plus.jiangruyi.com/album/5.jpg',
    'https://uview-plus.jiangruyi.com/album/6.jpg',
    'https://uview-plus.jiangruyi.com/album/7.jpg',
    'https://uview-plus.jiangruyi.com/album/8.jpg',
    'https://uview-plus.jiangruyi.com/album/9.jpg',
    'https://uview-plus.jiangruyi.com/album/10.jpg',
];

// 定义 loadmore 函数（确保在调用之前）
const loadmore = () => {
    for (let i = 0; i < 30; i++) {
        const randomIndex = Math.floor(Math.random() * urls.length);
        indexList.value.push({
            url: urls[randomIndex],
        });
    }
};

// 页面加载时调用 loadmore
onLoad(() => {
    loadmore();
});

// 定义 scrolltolower 回调，调用 loadmore
const scrolltolower = () => {
    loadmore();
};
</script>
